<template>
  <div class="exercise-page">
    <!-- 答题头部信息 -->
    <div class="exercise-header">
      <div class="exercise-info">
        <el-tag>{{ exercise.courseName }}</el-tag>
        <h2>{{ exercise.title }}</h2>
      </div>
      <div class="exercise-meta">
        <el-tag size="small" :type="exercise.difficultyType">{{ exercise.difficulty }}</el-tag>
        <span>正确率: {{ exercise.correctRate }}%</span>
        <el-button type="primary" @click="submitAnswer">提交答案</el-button>
      </div>
    </div>

    <!-- 题目内容 -->
    <div class="exercise-content">
      <div class="question-content" v-html="exercise.content"></div>

      <!-- 答题区域 -->
      <div class="answer-section">
        <!-- 单选题 -->
        <template v-if="exercise.type === 'single'">
          <el-radio-group v-model="userAnswer">
            <el-radio 
              v-for="option in exercise.options" 
              :key="option.key" 
              :label="option.key"
              class="answer-option"
            >
              {{ option.key }}. {{ option.content }}
            </el-radio>
          </el-radio-group>
        </template>

        <!-- 多选题 -->
        <template v-else-if="exercise.type === 'multiple'">
          <el-checkbox-group v-model="userAnswer">
            <el-checkbox 
              v-for="option in exercise.options" 
              :key="option.key" 
              :label="option.key"
              class="answer-option"
            >
              {{ option.key }}. {{ option.content }}
            </el-checkbox>
          </el-checkbox-group>
        </template>

        <!-- 判断题 -->
        <template v-else-if="exercise.type === 'judge'">
          <el-radio-group v-model="userAnswer">
            <el-radio label="true" class="answer-option">正确</el-radio>
            <el-radio label="false" class="answer-option">错误</el-radio>
          </el-radio-group>
        </template>

        <!-- 填空题 -->
        <template v-else-if="exercise.type === 'blank'">
          <div class="blank-answers">
            <div v-for="(blank, index) in exercise.blanks" :key="index" class="blank-item">
              <span class="blank-label">空格 {{ index + 1 }}:</span>
              <el-input v-model="userAnswer[index]" placeholder="请填写答案" />
            </div>
          </div>
        </template>

        <!-- 主观题 -->
        <template v-else-if="exercise.type === 'subjective'">
          <el-input
            v-model="userAnswer"
            type="textarea"
            :rows="6"
            placeholder="请输入你的答案"
          />
        </template>
      </div>
    </div>

    <!-- 解答解释（提交后显示） -->
    <el-collapse-transition>
      <div v-if="showExplanation" class="explanation-section">
        <el-card>
          <template #header>
            <div class="explanation-header">
              <h3>题目解析</h3>
              <el-tag :type="isCorrect ? 'success' : 'danger'">
                {{ isCorrect ? '回答正确' : '回答错误' }}
              </el-tag>
            </div>
          </template>
          <div v-if="exercise.type !== 'subjective'">
            <h4>正确答案：</h4>
            <p>{{ formatCorrectAnswer(exercise.correctAnswer) }}</p>
          </div>
          <div v-html="exercise.explanation"></div>
          
          <!-- 相关知识点 -->
          <div class="related-points">
            <h4>相关知识点：</h4>
            <el-tag 
              v-for="point in exercise.relatedPoints"
              :key="point.id"
              class="point-tag"
              @click="navigateToPoint(point.id)"
            >
              {{ point.name }}
            </el-tag>
          </div>
        </el-card>
      </div>
    </el-collapse-transition>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'

// 示例数据
const exercise = ref({
  id: 1,
  type: 'single', // 'single', 'multiple', 'judge', 'blank', 'subjective'
  courseName: '计算机网络',
  title: 'TCP三次握手过程',
  difficulty: '中等',
  difficultyType: 'warning',
  correctRate: 65,
  content: `
    <p>在TCP三次握手过程中，下列哪个选项正确描述了第二次握手时服务器发送的报文段？</p>
  `,
  options: [
    { key: 'A', content: 'SYN=1, ACK=0, seq=y' },
    { key: 'B', content: 'SYN=1, ACK=1, seq=y, ack=x+1' },
    { key: 'C', content: 'SYN=0, ACK=1, seq=y, ack=x+1' },
    { key: 'D', content: 'SYN=0, ACK=0, seq=y+1' }
  ],
  correctAnswer: 'B',
  explanation: `
    <p>TCP三次握手过程中，第二次握手服务器发送的报文段特点：</p>
    <ul>
      <li>SYN=1：表示这是一个同步报文段</li>
      <li>ACK=1：表示确认号字段有效</li>
      <li>seq=y：服务器选择自己的序号y</li>
      <li>ack=x+1：确认客户端的序号，期望收到序号x+1的报文段</li>
    </ul>
  `,
  relatedPoints: [
    { id: 1, name: 'TCP连接建立' },
    { id: 2, name: 'TCP报文格式' },
    { id: 3, name: '可靠传输原理' }
  ]
})

const userAnswer = ref(exercise.value.type === 'blank' ? [] : '')
const showExplanation = ref(false)
const isCorrect = ref(false)

// 格式化正确答案显示
const formatCorrectAnswer = (answer) => {
  if (Array.isArray(answer)) {
    return answer.join('、')
  }
  if (answer === 'true') return '正确'
  if (answer === 'false') return '错误'
  return answer
}

// 提交答案
const submitAnswer = () => {
  // 这里应该调用API进行答案验证
  showExplanation.value = true
  isCorrect.value = userAnswer.value === exercise.value.correctAnswer
}

// 导航到知识点
const router = useRouter()
const navigateToPoint = (pointId) => {
  router.push(`/point/${pointId}`)
}
</script>

<style scoped>
.exercise-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.exercise-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.exercise-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.exercise-meta {
  display: flex;
  align-items: center;
  gap: 16px;
}

.exercise-content {
  background: white;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

.answer-option {
  display: block;
  margin-bottom: 12px;
}

.blank-answers {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.blank-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.blank-label {
  min-width: 60px;
}

.explanation-section {
  margin-top: 20px;
}

.explanation-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.related-points {
  margin-top: 16px;
}

.point-tag {
  margin: 4px;
  cursor: pointer;
}
</style> 